---
type: integration
title: '@astrojs/svelte'
description: "Apprenez à utiliser l'intégration du framework @astrojs/svelte pour étendre la prise en charge des composants dans votre projet Astro."
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [Svelte](https://svelte.dev/). Elle supporte Svelte 3, 4 et 5 (expérimental).

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Pour installer `@astrojs/svelte`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add svelte
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add svelte
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add svelte
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/svelte` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/svelte
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/svelte
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/svelte
    ```
  </Fragment>
</PackageManagerTabs>

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement "Cannot find package 'svelte'" (ou similaire) lorsque vous démarrez Astro, vous devez installer Svelte :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install svelte
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add svelte
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add svelte
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js title="astro.config.mjs" ins={2} ins="svelte()"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});
```

## Démarrage

Pour utiliser votre premier composant Svelte dans Astro, consultez notre [documentation sur les frameworks UI][astro-ui-frameworks]. Vous y découvrirez :

* 📦 comment les composants du framework sont chargés,
* 💧 les options d'hydratation côté client, et
* 🤝 les possibilités de mélanger et d'imbriquer les frameworks entre eux

## Options

Cette intégration est alimentée par `@sveltejs/vite-plugin-svelte`. Pour personnaliser le compilateur Svelte, des options peuvent être fournies à l'intégration. Voir [`@sveltejs/vite-plugin-svelte` docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) pour plus de détails.

### Options par défaut

Cette intégration transmet les options par défaut suivantes au compilateur Svelte :

```js
const defaultOptions = {
  emitCss: true,
  compilerOptions: { dev: isDev, hydratable: true },
  preprocess: vitePreprocess(),
};
```

Ces valeurs `emitCss`, `compilerOptions.dev`, et `compilerOptions.hydratable` sont nécessaires pour construire correctement pour Astro et ne peuvent pas être surchargées.

Fournir vos propres options de `preprocess` **aura** pour effet de surcharger la valeur par défaut de [`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md). Assurez-vous d'activer les flags de préprocesseur nécessaires à votre projet.

Vous pouvez définir les options en les passant à l'intégration `svelte` dans `astro.config.mjs` ou dans `svelte.config.js`. L'une ou l'autre de ces deux options remplacera le réglage par défaut de `preprocess` :

```js title="astro.config.mjs" "preprocess: []"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
```

```js title="svelte.config.js"
export default {
  preprocess: [],
};
```

## Auto-complétion pour TypeScript

<Since v="2.0.0" pkg="@astrojs/svelte" />

Si vous utilisez un préprocesseur comme TypeScript ou SCSS dans vos fichiers Svelte, vous pouvez créer un fichier `svelte.config.js` pour que l'extension Svelte IDE puisse analyser correctement les fichiers Svelte.

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};
```

Ce fichier de configuration sera automatiquement ajouté pour vous lorsque vous lancerez `astro add svelte`.

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework
